<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-body">
        <el-row type="flex" justify="center">
          <el-col :span="14">
            <el-form
              ref="form"
              :model="pageAjax.data"
              :rules="pageAjax.rules"
              label-width="120px"
            >
              <el-form-item label="用户名：">
                {{ $store.state.userData.userName }}
              </el-form-item>
              <el-form-item label="原始密码：" prop="password">
                <el-input
                  autocomplete="off"
                  placeholder="请输入原始密码"
                  type="password"
                  v-model="pageAjax.data.password"
                ></el-input>
              </el-form-item>
              <el-form-item label="新密码：" prop="newPassword">
                <el-input
                  autocomplete="off"
                  placeholder="请输入新密码"
                  type="password"
                  v-model="pageAjax.data.newPassword"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="rSubmitForm">提交</el-button>
                <el-button @click="rBack">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { updatePassword } from "@/api/user.js";

export default {
  name: "system_usercenterSettingChangePassword",
  data() {
    return {
      pageAjax: {
        btnDisabled: false,
        btnLoading: false,
        loading: false,
        data: {
          password: "",
          newPassword: ""
        },
        rules: {
          password: [
            { required: true, message: "原密码不能为空", trigger: "blur" },
            {
              min: 5,
              max: 100,
              message: "密码长度必须在5-100个字符",
              trigger: "blur"
            }
          ],
          newPassword: [
            { required: true, message: "新密码不能为空", trigger: "blur" },
            {
              min: 5,
              max: 100,
              message: "密码长度必须在5-100个字符",
              trigger: "blur"
            }
          ]
        }
      }
    };
  },
  methods: {
    rSubmitForm() {
      let _that = this;
      let submitData = _that.pageAjax.data;
      let userData = _that.$store.state.userData;
      if (_that.pageAjax.loading) {
        return;
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          _that.pageAjax.loading = true;
          submitData.userId = userData.userId;

          updatePassword(submitData)
            .then(resp => {
              let respData = resp.data || {};
              if (respData.code === _that.STATUS.success[0]) {
                _that.$message.success(respData.msg || "添加失败");
              } else {
                _that.$message.error(respData.msg || "添加失败");
              }
              // if (respData.code === _that.STATUS.success[0]) {
              //   _that.$router.go(-1);
              // } else {
              //   _that.$message.error(respData.msg || "添加失败");
              // }
            })
            .finally(() => {
              _that.pageAjax.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    rBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .c-departmentBox {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #eee;
  }
  .c-departmentItem {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    &:last-child {
      border: none;
    }
  }
}
</style>
